<template>
  <div class="alarm-trend">
    <div class="alarm-trend-main">
      <div class="alarm-trend-title">
        <span>上月报警趋势</span>
        <em class="total">{{eventCount}}</em>
      </div>
      <div class="alarm-trend-echarts" id="alarmTrendEcharts"></div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      eventCount: 0
    }
  },
  mounted () {
    let url = this.$base.getUrl('summaryLastMonthEvent')
    let params = {
      url: url,
      data: {}
    }
    this.$store.dispatch('postForm', params).then(res => {
      if (res.code === 0) {
        // console.log(res.result)
        this.echartFun(res.result)
      }
    })
  },
  methods: {
    echartFun (result) {
      this.eventCount = result.eventCount

      let datas = []
      let echartData = []

      for (let i = 0; i < result.maxDay; i++) {
        let day = i + 1
        echartData.push({
          value: day,
          textStyle: {
            fontSize: 12,
            color: '#4fe0bf'
          }
        })

        let flag = false
        for (let j = 0; j < result.detailList.length; j++) {
          if (day === result.detailList[j].day) {
            flag = true
            datas.push(result.detailList[j].eventCount)
            break
          }
        }

        if (!flag) {
          datas.push(0)
        }
      }

      let charts = this.$echarts.init(
        document.getElementById('alarmTrendEcharts')
      )
      let option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '0',
          right: '0',
          top: '9%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: echartData,
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#50E3C2',
                opacity: '0.5'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#4fe0bf',
                opacity: '0.3'
              }
            }
          }
        ],
        yAxis: [
          {
            axisTick: { show: false },
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#4fe0bf'
              }
            },
            axisLine: {
              lineStyle: {
                width: 0
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#4fe0bf',
                opacity: '0.3'
              }
            }
          }
        ],
        series: [
          {
            name: '告警数',
            type: 'bar',
            barGap: '30%',
            barWidth: '60%',
            itemStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#F57BB7' },
                  { offset: 1, color: '#EFB486' }
                ])
              },
              emphasis: {
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2FDECA' },
                  { offset: 1, color: '#2FDE80' }
                ])
              }
            },
            data: datas
          }
        ]
      }
      charts.setOption(option, true)
    }
  },
  computed: {},
  watch: {}
}
</script>
<style lang="less" >
.alarm-trend {
  width: 270px;
  background: rgba(43, 54, 72, 0.7);
  border-radius: 4px;
  height: 155px;
}
.alarm-trend-main {
  padding: 16px 20px;
}
.alarm-trend-title {
  height: 36px;
  position: relative;
  span {
    font-size: 12px;
    color: #ffffff;
    line-height: 20px;
  }
  em.total {
    font-size: 30px;
    color: #f5a623;
    font-style: normal;
    position: absolute;
    right: 0;
    line-height: 34px;
  }
}
.alarm-trend-echarts {
  width: 236px;
  height: 92px;
  margin: 0 auto;
}
</style>
